<template>
    <div>
        <!--该页面主要用于复习知识点 和演示大家一会的知识点 或者需要重复讲解的知识点 \
        所有的组件注册使用时不建议直接接驼峰或者带有大写字母 因为html不区分大小写
        注册的组件可以写成单标签 也可以写成标签对
        v-model其实是v-bind和@表单事件的组合
        在vue3中 v-model后面可以通过：绑定一个自定义属性 指定数据双向绑定的属性
        vue3中组件可以多次使用v-model指令

        vue3中v-model和vue2中v-model的去给
        第一个： vue2中v-model绑定的属性是value vue3中默认绑定的属性是modelValue但是属性还可以自定义
        第二个区别：vue3中 v-model可以在组件上多次使用 来实现多个数据的双向绑定
        第三个： vue3中v-model的数据 可以通过 emit('update:自定义属性', value) 完成对数据的更新
        https://blog.csdn.net/wjw0125/article/details/117561032 v-model使用博客参考地址
        -->
        <test-input v-model:aaa="content" v-model:bbb="content2"/>
    </div>
</template>

<script>
import testInput from '@/components/testInput/testInput'
import { ref, watchEffect } from 'vue'
// watchEffect 监听ref数据变化的方法
export default {
    name: '',
    components: {
        testInput
    },

    setup() {
        let content = ref('hello world')
        let content2 = ref('德玛西亚')
        watchEffect(() => {
            console.log(content.value);

            console.log(content2.value)
        })
        return {
            content,
            content2
        }
    }
 }
</script>

<style scoped>
</style>